<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>爱哪无忧--聊天室</title>

<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="./style.css" rel="stylesheet">

<script src="http://realtime.plhwin.com/socket.io/socket.io.js"></script>

</head>

<body>

<div id="loginbox" style="display:none">
    <div style="width:260px;margin:200px auto;">
        请先输入你在聊天室的昵称
        <br/>
        <br/>
        <input type="text" style="width:180px;" placeholder="请输入用户名" id="username" name="username" />
		<input type="button" style="width:50px;" value="提交" onclick="CHAT.usernameSubmit();"/>
    </div>
</div>

<div class="container" id="chatbox" style="display:none;">
	<nav class="navbar navbar-default" role="navigation">
	  <div class="container-fluid">
	    <!-- Brand and toggle get grouped for better mobile display -->
	    <div class="navbar-header">
	      <a class="navbar-brand" href="#">Socket聊天室</a>
	    </div>

	    <!-- Collect the nav links, forms, and other content for toggling -->
	    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	      <ul class="nav navbar-nav navbar-left">
	      </ul>
	      <ul class="nav navbar-nav navbar-right">
	        <li><a href="#" id="showusername">小莫</a></li>
	        <li class="dropdown">
	          <a onclick="CHAT.logout();" >退出</a>
	        </li>
	      </ul>
	    </div>
	  </div>

	    <div class="row">
	        <div class="col-md-8">
	            <div class="panel panel-default">
	                <div class="panel-heading">
	                    <h3 class="panel-title"><span class="glyphicon glyphicon-th-list"></span>&nbsp;&nbsp;聊天框&nbsp;&nbsp;<span id="onlinecount"></span></h3>
	                </div>
	                <div class="panel-body">
		                <div style="height:400px; overflow-x:hidden; overflow-y:scroll;">
		                   <div id="chat">
	                    			<div id="message" class="message">
	                    			</div>
									<div id="onlinecount" style="background:#EFEFF4; font-size:12px; margin-top:10px; margin-left:10px; color:#666;">
									</div>
	                    	</div>
		                </div>


		                    <div>
	                            <div class="input-group">
	                                <input type="text" class="form-control" id="content" placeholder="感觉自己萌萌哒?">
	                                <span class="input-group-btn"><button class="btn btn-default" type="submit" onclick="CHAT.submit();">发送</button></span>
	                            </div>		            
		                    </div>
	                </div>
	            </div>
	        </div>




	        <div class="col-md-4">
	            <div class="panel panel-default">
	                <div class="panel-heading">
	                    <h3 class="panel-title"><span class="glyphicon glyphicon-user"></span>用户列表</h3>
	                </div>
	                <div class="panel-body">
	                    <div style="height:434px; overflow-x:hidden; overflow-y:scroll;">
	                        <div>
	                            <ul class="media" style="padding:10px"  id="user-list">
	                                <!-- <li class="media-left" style="height:50px;">
	                                    <img class="media-object" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1020909558,4134438749&fm=21&gp=0.jpg" style="width:35px; height:35px;float:left">
	                                    <h4 class="media-left" style="float:left">小莫</h4>
	                                </li> --> 
	                            </ul>
	                        </div>
	                    </div>
	                </div>
	            </div>
	        </div>
	    </div>



		</div>
		</div>
	</nav>
	<script type="text/javascript" src="./client.js"></script>
	<script>
		CHAT.loadPage();
	</script>
</body>
</html>
